<template>
  <div class="whole">
    <div class="head">
      <van-row type="flex" align="center">
        <van-icon name="arrow-left" style="margin-left:5px; font-size:16px; color:green;" @click="tiaozhuan" />
        <van-col span="22">关于零食</van-col>
      </van-row>
    </div>
    <van-grid>
      <van-grid-item v-for="(item,index) in list" :key="index" @click="onclick">
        <div class="pic">
          <van-image
       :src="item.src"
      />
        </div>
        <p>{{item.name}}</p>
        <span>{{item.title}}</span
        >
        
      </van-grid-item>
    </van-grid>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list:[
        {
          name:"饼干比较试验",
          src:"https://img0.baidu.com/it/u=3445634690,2133193747&fm=26&fmt=auto",
          title:"根据消费者关注的糖分、热量、甜味剂3个方面，检测指标和检测方法与检测机构及食品专家沟通讨论，确定本次检测的指标为饼干的总糖、热量、甜味剂......"
        }
        ,
         {
          name:"零食比较试验",
          src:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.cnpp.cn%2Fupload%2Fimages%2F20180903%2F18032839928_790x591.jpg&refer=http%3A%2F%2Fimage.cnpp.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642819297&t=9d51c7670d1abe89e7e6631d958bce78",
          title:"根据消费者关注的糖分、热量、辣度3个方面，检测指标和检测方法与检测机构及食品专家沟通讨论，确定本次检测的指标为零食的总糖、热量、甜味剂......"
        }
      ]
    };
  },
  methods:{
      onclick() {
      this.$router.push({ path: "/mouth" }).catch((error) => error);
    },
    tiaozhuan(){
      this.$router.push({ path: "/home" }).catch((error) => error);
    }
  }
};
</script>
<style scoped lang="less">
.whole {
  height: 100%;
  .head {
    width: 100%;
    height: 51px;
    color: rgba(80, 80, 80, 1);
    background-color: rgba(239, 239, 239, 1);
    font-size: 14px;
    line-height: 150%;
    text-align: center;
    .van-row {
      height: 100%;
      .van-col {
        height: 100%;
        line-height: 51px;
        left: 152px;
        top: 18px;
        color: rgba(42, 131, 78, 1);
        font-size: 18px;
      }
    }
  }
  .van-grid {
    width: 358px;
    height: 100%;
    .van-grid-item {
      width: 358px;
      height: 100%;
      color: rgba(250, 250, 250, 1);
      background-color: rgba(250, 250, 250, 1);
      font-size: 16px;
      line-height: 150%;
      box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.5);
      margin-top: 10px;
      margin-left: 8px;
      .pic{
        width: 358px;
        height: 184px;
        overflow: hidden;
      }
      p {
        position: absolute;
        left: 17px;
        top: 160px;
        color: rgba(255, 255, 255, 1);
        text-shadow: rgba(0, 0, 0, 0.5) 0px 2px 2px;
        font-size: 23px;
      }
      span {
        width: 324px;
        height: 74px;
        left: 28px;
        top: 261px;
        color: rgba(0, 0, 0, 0.8700000048);
        font-size: 13px;
        line-height: 170%;
        text-align: left;
        padding: 20px;
      }
    }
  }
}
</style>
